
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>成交单补款申请单</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" charset="utf-8" src="../layui/xm-select1.js"></script>
<!--    <link rel="stylesheet" href="../layui/css/layui.css">-->
<!--    <script src="../layui/layui.js"></script>-->
    <link rel="stylesheet" href="../layui-v2.9.8/layui/css/layui.css">
    <script src="../layui-v2.9.8/layui/layui.js"></script>
</head>
<body>

<style>
    .layui-form-label {
        text-align: left; /* 设置文字左对齐 */
    }
</style>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>成交单补款申请单</legend>
</fieldset>

<form class="layui-form" action="/process/proofbargainupdate" enctype="multipart/form-data" method="post"id="proofbargainForm">
    <div style="display: none"><input type="text"name="id" id="formid" th:value="${ProofBargain.id}"></div>
    <!--    第一行-->

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">用户</label>
            <div class="layui-input-inline">
                <input type="text" name="name" lay-verify="name" readonly autocomplete="off" class="layui-input" th:value="${ProofBargain.name}">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-inline">
                <input type="text" name="sex" lay-verify="sex" readonly autocomplete="off" class="layui-input" th:value="${ProofBargain.sex}" >
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-inline">
                <input type="text" name="telephone" lay-verify="telephone" readonly autocomplete="off" class="layui-input" th:value="${ProofBargain.telephone}">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">QQ</label>
            <div class="layui-input-inline">
                <input type="text" name="QQ" lay-verify="QQ" readonly autocomplete="off"  class="layui-input" th:value="${ProofBargain.QQ}">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">向日葵</label>
            <div class="layui-input-inline">
                <input type="text" name="sunflower" lay-verify="sunflower" readonly autocomplete="off" class="layui-input" th:value="${ProofBargain.sunflower}">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">身份证号码</label>
            <div class="layui-input-inline">
                <input type="text" name="idCard" lay-verify="idCard" autocomplete="off" readonly class="layui-input" th:value="${ProofBargain.idCard}">
            </div>
        </div>

    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">加好友日期</label>
            <div class="layui-input-inline">
                <input type="text" name="friendDate" id="friendDate" readonly lay-verify="friendDate"  autocomplete="off" class="layui-input" th:value="${ProofBargain.friendDate}">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">转账日期</label>
            <div class="layui-input-inline">
                <input type="text" name="transferDate" id="transferDate" lay-verify="transferDate" autocomplete="off" class="layui-input" >
            </div>
        </div>


    </div>
    <!-- 新增是否全款 -->
    <div class="layui-form-item" lay-verify="paymentWay">
        <label class="layui-form-label">是否全款</label>
        <div class="layui-input-block">
            <input type="radio" name="paymentWay" value="1" title="是" lay-filter="paymentWay" >
            <input type="radio" name="paymentWay" value="2" title="否" lay-filter="paymentWay" >
        </div>
    </div>

    <!-- 发票选择和合同签署方式的外层div，用于控制显示和隐藏 -->
    <div class="invoice-contract" id="invoice-contract" style="display: none;">
        <!-- 合同签署方式 contract-->
        <div class="layui-form-item">
            <label class="layui-form-label">合同签署</label>
            <div class="layui-input-block">
                <input type="radio" name="contract" value="电子签" title="电子签" lay-verify="contract">
                <input type="radio" name="contract" value="网签" title="网签" lay-verify="contract">
                <input type="radio" name="contract" value="邮寄" title="邮寄" lay-verify="contract">
            </div>
        </div>
        <!-- 发票选择方式 invoice-->
        <div class="layui-form-item">
            <label class="layui-form-label">发票选择</label>
            <div class="layui-input-block">
<!--                <input type="radio" name="invoice" value="纸质发票" title="纸质发票" lay-verify="invoice">-->
                <input type="radio" name="invoice" value="电子发票" title="电子发票" lay-verify="invoice">
                <input type="radio" name="invoice" value="无" title="无" lay-verify="invoice">
            </div>
        </div>
    </div>

    <!--将收款方式的单选改为多选-->
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">收款方式</label>
            <div class="layui-input-block" id="paymentMethod" >
                <input type="checkbox" name="paymentMethod" lay-skin="tag" value="银行转账" title="银行转账" lay-verify="paymentMethod" >
                <input type="checkbox" name="paymentMethod" lay-skin="tag" value="微信" title="微信" lay-verify="paymentMethod" >
                <input type="checkbox" name="paymentMethod" lay-skin="tag" value="支付宝" title="支付宝" lay-verify="paymentMethod" >
                <input type="checkbox" name="paymentMethod" lay-skin="tag" value="工行码" title="工行码" lay-verify="paymentMethod" >
                <input type="checkbox" name="paymentMethod" lay-skin="tag" value="聚合码" title="聚合码" lay-verify="paymentMethod" >
                <input type="checkbox" name="paymentMethod" lay-skin="tag" value="建行码" title="建行码" lay-verify="paymentMethod" >
                <input type="checkbox" name="paymentMethod" lay-skin="tag" value="农行" title="农行" lay-verify="paymentMethod" >
                <input type="checkbox" name="paymentMethod" lay-skin="tag" value="招行码" title="招行码" lay-verify="paymentMethod" >
            </div>
        </div>
    </div>
    <!--将收款方的单选改为多选-->
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">收款方</label>
            <div class="layui-input-block" id="paymentAddress">
                <input type="checkbox" name="paymentAddress" lay-skin="tag" value="易诚科技" title="易诚科技" lay-verify="paymentAddress" >
                <input type="checkbox" name="paymentAddress" lay-skin="tag" value="易诚工行" title="易诚工行" lay-verify="paymentAddress" >
                <input type="checkbox" name="paymentAddress" lay-skin="tag" value="易诚农行" title="易诚农行" lay-verify="paymentAddress" >
                <input type="checkbox" name="paymentAddress" lay-skin="tag" value="易诚建行" title="易诚建行" lay-verify="paymentAddress" >
<!--                <input type="checkbox" name="paymentAddress" lay-skin="tag" value="李建祥" title="李建祥" lay-verify="paymentAddress" >-->
                <input type="checkbox" name="paymentAddress" lay-skin="tag" value="招行" title="招行"lay-verify="paymentAddress" >
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">收款金额(元)</label>
            <div class="layui-input-inline">
                <input type="text" name="paymentAmount" lay-verify="paymentAmount" autocomplete="off" lay-affix="clear" class="layui-input" >
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">成交周期(天)</label>
            <div class="layui-input-inline">
                <input type="text" readonly name="tradeTime" id="tradeTime" lay-verify="tradeTime" autocomplete="off" class="layui-input" th:value="${ProofBargain.tradeTime}">
            </div>
        </div>
    </div>


    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">业务员</label>
            <div class="layui-input-inline">
                <input type="text" name="salesman" readonly lay-verify="required" autocomplete="off" class="layui-input" th:value="${ProofBargain.salesman}">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">地址</label>
            <div class="layui-input-inline">
                <input type="text" name="address" lay-verify="required" autocomplete="off" readonly class="layui-input" th:value="${ProofBargain.address}">
            </div>
        </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">补款日期及金额</label>
            <div class="layui-input-inline">
                <input type="text" name="supplementaryPayment" autocomplete="off" lay-affix="clear" class="layui-input" >
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">尾款日期及金额</label>
            <div class="layui-input-inline">
                <input type="text" name="balancePayment"  autocomplete="off" lay-affix="clear" class="layui-input" >
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">资金量(万)</label>
            <div class="layui-input-inline">
                <input type="text" name="financingVolume" lay-verify="financingVolume" autocomplete="off" readonly class="layui-input" th:value="${ProofBargain.financingVolume}">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">定金日期及金额</label>
            <div class="layui-input-inline">
                <input type="text" name="deposit"  autocomplete="off"  lay-affix="clear" class="layui-input" >
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-inline">
                <input type="text" name="remarks" lay-verify="required" autocomplete="off" lay-affix="clear" class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">审核人</label>
            <div class="layui-input-block">
                <select id="auditingperson" name="auditingPerson" lay-verify="required">
<!--                <select id="auditingperson" name="auditingPerson" >-->
                    <option value=""></option>
                    <option th:each="BaseUser : ${lb}"th:value="${BaseUser.username}" th:text="${BaseUser.realName}"></option>
                </select>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">收款凭证</label>
            <div class="layui-input-inline">
                <input type="file" name="filePath" id="user-photo" lay-verify="file" multiple>
                <div th:if="${ProofBargain.fileAddress != null}" style="display: flex">
                    <div th:each="address : ${#strings.arraySplit(ProofBargain.fileAddress, '|')}" style="display: inline-block">
                        <img style="width: 200px; height: 200px; margin-left: 1px; margin-bottom: 1px; display: inline-block;" onclick="imgcli(this)" th:src="'/file/img?imgaddress='+ ${address}" >
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <div id="imgdiv">

            </div>
        </div>
    </div>

    <div class="layui-form-item" >
        <div class="layui-inline" style="padding-left: 22px;">
            <button class="layui-btn"lay-filter="submitForm" lay-submit id="submit" style="padding-left: 22px; margin-bottom: 20px;">提交补款单</button>
        </div>
    </div>
</form>

<script>
    // function deleteprocess() {
    //     // 创建表单数据对象
    //     var formData = new FormData();
    //     formData.append("id", layui.$("#formid").val());
    //     // 使用sendBeacon方法发送异步请求
    //     navigator.sendBeacon("/process/delete", formData);
    // }
    layui.use(['form', 'util', 'laydate'], function(){
        var form = layui.form;
        var layer = layui.layer;
        var util = layui.util;
        var laydate = layui.laydate;
        var  $=layui.$;
        var keys=[]
        var xm


        // radio 事件
        form.on('radio(paymentWay)', function(data){
            var elem = data.elem; // 获得 radio 原始 DOM 对象
            var checked = elem.checked; // 获得 radio 选中状态
            var value = elem.value; // 获得 radio 值
            var othis = data.othis; // 获得 radio 元素被替换后的 jQuery 对象
            var divobj = document.getElementById("invoice-contract");
            if(value == "1"){
                // layer.msg("点1")
                divobj.style.display = "block"; // 显示
            }
            if(value == "2"){
                // layer.msg("点2")
                divobj.style.display = "none"; // 隐藏
            }
            // layer.msg(['value: '+ value, 'checked: '+ checked].join('<br>'));
        });


        // window.addEventListener("beforeunload",deleteprocess);
        // 上传多张图片
        var getUserPhoto = document.getElementById("user-photo");
        getUserPhoto.addEventListener('change', function() {
            var filePath = this.files;
            var imgdiv = document.getElementById("imgdiv");
            var form = document.getElementById("proofbargainForm"); // 获取表单

            // 清空图片容器
            imgdiv.innerHTML = '';

            for (var i = 0; i < filePath.length; i++) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    var image = document.createElement("img");
                    image.src = e.target.result;
                    image.style.maxWidth = "200px";
                    image.style.maxHeight = "200px";
                    imgdiv.appendChild(image);

                    // 创建隐藏的input标签，用于提交图片数据
                    var input = document.createElement("input");
                    input.type = "hidden";
                    input.name = "filePath[]"; // 注意这里将name属性设置为数组形式
                    input.value = e.target.result;
                    form.appendChild(input); // 将input元素追加到表单中
                };
                reader.readAsDataURL(filePath[i]);
            }
            // console.log("图片", filePath)
        });
        //日期
        laydate.render({
            elem: '#transferDate',
            format: 'yyyy-MM-dd', // 设定日期显示格式
            type: 'date',
            done: function(value, date) {
                if($("#friendDate").val()==null||$("#friendDate").val().length<1){
                    return;
                }
                var currentDate = new Date(value);
                var targetDate = new Date($("#friendDate").val());
                var timeDiff = currentDate.getTime()-targetDate.getTime() ;
                var daysDiff = Math.floor(timeDiff / (1000 * 3600 * 24))+1;
                if(daysDiff<=0){
                    daysDiff=""
                }
                $("#tradeTime").val(daysDiff)
            }
        });
        // laydate.render({
        //     elem: '#friendDate',
        //     format: 'yyyy-MM-dd', // 设定日期显示格式
        //     type: 'date',
        //     done: function(value, date) {
        //         if($("#transferDate").val()==null||$("#transferDate").val().length<1){
        //             return;
        //         }
        //         var currentDate =new Date($("#transferDate").val());
        //         var targetDate = new Date(value);
        //         var timeDiff = currentDate.getTime()-targetDate.getTime() ;
        //         var daysDiff = Math.floor(timeDiff / (1000 * 3600 * 24))+1;
        //         if(daysDiff<=0){
        //             daysDiff=""
        //         }
        //         $("#tradeTime").val(daysDiff)
        //     }
        // });
        $.ajax({
            url: "/user/queryforselect",
            type: "post",
            async: true,
            success: function (data) {
                if(data.data){
                    for (var i = 0; i < data.data.length; i++) {
                        var temp = {
                            "name": data.data[i].realName,
                            "value": data.data[i].username  //value为唯一标识，此处为id
                        }
                        keys.push(temp)
                    }
                    xm=xmSelect.render({
                        el: '#copyPersonSelect',
                        direction: 'up',
                        filterable: true,
                        data: keys
                    })
                }
            },
        });
        //自定义验证规则
        form.verify({
            name: function(value){
                if(value.length < 1){
                    return '必填';
                }
            },
            telephone: function(value){
                if(value.length < 1){
                    return '必填';
                }

            },
            transferDate: function(value){
                if(value.length < 1){
                    return '必填';
                }
            },

            paymentMethod: function(value, item){
                var radioName = $(item).attr('name');
                var isChecked = false;
                $('input[name="' + radioName + '"]').each(function() {
                    if ($(this).is(':checked')) {
                        isChecked = true;
                        return false;
                    }
                });
                if (!isChecked) {
                    return '收款方式必填';
                }
            },
            paymentAddress: function(value, item){
                var radioName = $(item).attr('name');
                var isChecked = false;
                $('input[name="' + radioName + '"]').each(function() {
                    if ($(this).is(':checked')) {
                        isChecked = true;
                        return false;
                    }
                });
                if (!isChecked) {
                    return '收款方必填';
                }
            },
            paymentAmount: function(value){
                if(value.length < 1){
                    return '必填';
                }
                if(!/^[0-9.]+$/.test(value)){
                    return '请输入数字';
                }
            },
            paymentWay: function(value){
                if($('input[name="paymentWay"]:checked').length < 1){
                    return '请选择是否全款';
                }
            },
            contract: function(value){
                var paymentWay = $('input[name="paymentWay"]:checked').val();
                if(paymentWay == '1' && $('input[name="contract"]:checked').length < 1){
                    return '请选择合同签署方式';
                }
            },

            invoice: function(value){
                var paymentWay = $('input[name="paymentWay"]:checked').val();
                if(paymentWay == '1' && $('input[name="invoice"]:checked').length < 1){
                    return '请选择发票方式';
                }
            },
            idCard: function(value){
                if(value.length < 1){
                    return '必填';
                }
            },
            file:function(value){
                if(value.length < 1){
                    return '成交凭证必须上传';
                }
            },
            friendDate: function(value){
                if(value.length < 1){
                    return '必填';
                }
            },
            tradeTime: function(value){
                if(value.length < 1){
                    return '成交周期必填';
                }
                if (!/^[0-9]*$/.test(value)&& value.length>0){
                    return "请输入正确成交周期";
                }
            },
            financingVolume: function(value){
                if(value.length < 1){
                    return '必填';
                }
                if (!/^[0-9]*$/.test(value)&& value.length>0){
                    return "请输入正确资金量";
                }
            }

        });

        form.on('submit(submitForm)', function(data){
            var sindex= layer.load(2, {shade: [0.5,'#000']});
            return true;
        });

    });
</script>

</body>
</html>